<template>
  <div class="h-panel">
    <div class="h-panel-bar">
      <Button color="primary" @click="add">新增</Button>
      <Space :width="10" />
      <Button @click="locadData">刷新</Button>
    </div>
    <div class="h-panel-body bottom-line">
      <Table :datas="datas">
        <TableItem title="模板名称" prop="name" :width="200" />
        <TableItem title="模板路径" prop="filePath" />
        <TableItem title="操作" :width="200" fixed="right">
          <template #default="{ data }">
            <span class="link" @click="edit(data)">编辑</span>
            <Space :width="10" />
            <span class="link" @click="remove(data)">删除</span>
            <Space :width="10" />
            <span class="link" @click="download(data)">下载</span>
          </template>
        </TableItem>
      </Table>
    </div>
    <div class="h-panel-bar">
      <Pagination :page="page" :total="page.total" @change="locadData" />
    </div>

    <Modal v-model="editOpend" :closeOnMask="false" :hasCloseIcon="false" :hasDivider="true" :draggable="true">
      <template #header>模板管理</template>
      <Form ref="form" :model="formModel" :labelWidth="90" :rules="validationRules">
        <FormItem label="模板名称" prop="name">
          <Input type="text" v-model="formModel.name" />
        </FormItem>
        <FormUpload label="上传模板" :value="formModel.filePath" url="/file/upload"
          :params="{ filename: formModel.filePath }" name="file" accept=".pptx" @success="uploadSuccess">
        </FormUpload>
        <FormItem label="是否共享" prop="isOpen">
          <Radio v-model="formModel.isOpen" :datas="isOpenData"></Radio>
        </FormItem>
      </Form>
      <template #footer>
        <Button @click="editOpend = false">关闭</Button>
        <Space :width="10" />
        <Button color="blue" @click="saveOrUpdate">确认</Button>
      </template>
    </Modal>

  </div>
</template>

<script>
import { confirm, message } from 'heyui';

export default {
  mounted() {
    this.locadData();
  },
  created() {
  },
  data() {
    return {
      isOpenData: [{ "value": "1", "label": "是" }, { "value": "0", "label": "否" }],
      page: {
        cur: 1,
        size: 10,
        total: 0
      },
      formModel: {
        isOpen: "1",
      },
      editOpend: false,
      datas: [],
      validationRules: {
        required: ['name', 'isOpen']
      },
    };
  },
  methods: {
    locadData(p) {
      if (!!p) {
        this.page = p;
      }
      this.$post("/ppttemplate/page", {
        page: { current: this.page.cur, size: this.page.size },
      }).then(res => {
        if (res.data == null) {
          this.page.total = 0;
          return;
        }
        if (res.data.code != this.$success && res.msg != null) {
          message.error(res.msg);
          return;
        }
        if (!!res.data.data) {
          if (res.data.data.rows != null) {
            this.datas = res.data.data.rows;
          } else {
            this.datas = [];
          }
          this.page.total = res.data.data.total;
          return;
        } else {
          this.datas = [];
          this.page.total = 0;
        }
      });
    },
    uploadSuccess(data) {
      this.formModel.filePath = data;
    },
    saveOrUpdate() {
      let validResult = this.$refs.form.valid();
      console.log(validResult)
      if (!validResult.result) {
        return;
      }
      if (!!this.formModel.id) {
        this.edit()
      } else {
        this.add();
      }
    },
    add() {
      if (!this.editOpend) {
        this.formModel = {};
        this.editOpend = true;
        return;
      }
      this.$post("/ppttemplate", this.formModel).then(res => {
        if (res.data.code == this.$success) {
          this.editOpend = false;
          this.formModel = {};
          this.locadData();
        }
      });
    },
    edit(data) {
      if (!this.editOpend) {
        this.formModel = data;
        this.editOpend = true;
        return;
      }
      this.$put("/ppttemplate/edit", this.formModel).then(res => {
        if (res.data.code == this.$success) {
          this.editOpend = false;
          this.formModel = {};
          this.locadData();
        }
      });
    },
    download(data) {
      this.$download("/file/download?filename=" + data.filePath + "&name=" + data.name);
    },
    remove(data) {
      confirm({
        content: '确定删除？',
        onConfirm: () => {
          this.$delete("/ppttemplate/" + data.id).then(res => {
            if (res.data.code == this.$success) {
              this.locadData();
            }
          });
        }
      });
    }
  },
};
</script>